<template>
  <div>
    <el-table
      ref="tableRef"
      v-loading="isLoading"
      :data="dataArray"
      row-key="id"
      height="512"
      :cell-style="cellStyle"
      @selection-change="handleSelectionChange"
      @row-dblclick="handleRowDblclick"
      @cell-click="handleCellClick"
    >
      <!-- 多选框 -->
      <el-table-column
        reserve-selection
        type="selection"
        align="center"
        width="64"
      >
      </el-table-column>
      <!-- 序号 -->
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="64"
      >
      </el-table-column>
      <el-table-column
        v-for="column in visibleColumnArray"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        align="center"
        sortable
      >
        <template
          slot-scope="scope"
        >
          <el-tag
            v-if="column.prop === 'status'"
            :type="['danger', 'success', 'warning', 'success'][scope.row.status]"
          >
            {{ ['停用', '启用', '未知', '启用'][scope.row.status] }}
          </el-tag>
          <span v-else>
            {{ scope.row[column.prop] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="256"
      >
        <template
          slot-scope="scope"
        >
          <el-button
            type="primary"
            size="small"
            @click="handleCopy(scope.row.id)"
          >
            复 制
          </el-button>
          <el-button
            size="small"
            @click="handleEdit(scope.row.id)"
          >
            编 辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="pagination.number"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="pagination.size"
      :total="pagination.total"
      @size-change="handlePageSizeChange"
      @current-change="handlePageNumChange"
    >
    </el-pagination>
  </div>
</template>

<script>
/**
 * @typedef {{
 *   'birthday': String,
 *   'code': String,
 *   'company': String,
 *   'department': String,
 *   'id': String,
 *   'name': String,
 *   'position': String,
 *   'role': String,
 *   'sex': '男' | '女',
 *   'status': 0 | 1,
 *   'tel': String,
 * }} Data
 * @typedef {{
 *   'id': String,
 * }} Row 表格一行的数据
 * @typedef {{
 *   'property': String,
 * }} Column 表格一列的数据
 */
/**
 * # 用户数据表格
 * 用于展示用户数据
 *
 * 展示的数据项有`工号`、`用户名`、`所属公司`、`所属部门`、`所属角色`、`职位`、`性别`、`生日`、`电话`、和`状态`
 *
 * 存在隐含的`id`属性用于数据操作，不显示
 *
 * 可以对每一行的数据进行`复制`、`编辑`和`删除`操作
 */
export default {
  'name': 'UserDataTable',

  'props': {
    /**
     * `用户数据表格`的列的数据组成的数组
     * @type {{
     *    'label': String,
     *    'isVisible': Boolean
     *    'prop': String,
     *    'width': String,
     *  }[]}
     */
    'columnArray': {
      'default' () {
        return []
      },
      'type': Array,
    },
    /**
     * `用户数据表格`的用户数据
     * @type {Data[]}
     */
    'dataArray': {
      'default' () {
        return []
      },
      'type': Array,
    },
    /**
     * 设置`用户数据表格`是否为加载状态
     */
    'isLoading': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 设置`用户数据表格`的分页信息
     *
     * 包括`页码`、`页面容量`和`数据总量`
     * @type {{
     *   'number': Number,
     *   'size': Number,
     *   'total': Number,
     * }}
     */
    'pagination': {
      'default' () {
        return {
          'number': 1,
          'size': 10,
          'total': 0,
        }
      },
      'type': Object,
    },
  },

  'computed': {
    /**
     * 使用数组过滤方法将可视的`用户数据表格`列取出组成一个新的数组
     * @return {Data[]}
     */
    'visibleColumnArray' () {
      return this.columnArray.filter(({
        isVisible,
      }) => {
        return isVisible
      })
    },
  },

  'methods': {
    /**
     * 取消被勾选的行的勾选状态
     * @param {Row} row 被勾选的行
     */
    'cancelRowSelection' (row) {
      this.$nextTick(() => {
        this.$refs.tableRef.toggleRowSelection(row, false)
      })
    },
    /**
     * 设置单元格的样式
     * @param {{
     *   'column': Column,
     * }} param 数据对象
     */
    'cellStyle' ({
      column,
    }) {
      if (column.property !== 'role') {
        return {}
      }
      return {
        'cursor': 'pointer',
      }
    },
    /**
     * 取消所有被勾选的行的勾选状态
     */
    'clearSelection' () {
      this.$nextTick(() => {
        this.$refs.tableRef.clearSelection()
      })
    },
    /**
     * 处理`用户数据表格`单元格点击事件
     * @param {Row} row `用户数据表格`行
     * @param {Column} column `用户数据表格`列
     */
    'handleCellClick' (row, column) {
      if (column.property !== 'role') {
        return
      }
      this.$emit('role-click', row.id)
    },
    /**
     * 处理`复制`按钮的点击事件
     * @param {String} id 当前`用户数据表格`行的用户`id`
     */
    'handleCopy' (id) {
      this.$emit('copy', id)
    },
    /**
     * 处理`删除`按钮的点击事件
     * @param {Row} row 当前`用户数据表格`行对象
     */
    'handleDelete' (row) {
      this.$emit('delete', row)
    },
    /**
     * 处理`编辑`按钮的点击事件
     * @param {String} id 当前`用户数据表格`行的用户`id`
     */
    'handleEdit' (id) {
      this.$emit('edit', id)
    },
    /**
     * 处理`用户数据表格`的表格的当前页码修改事件
     * @param {Number} pageNum 页码
     */
    'handlePageNumChange' (pageNum) {
      this.$emit('current-change', pageNum)
    },
    /**
     * 处理`用户数据表格`的表格的页面容量修改事件
     * @param {Number} pageSize 页面容量
     */
    'handlePageSizeChange' (pageSize) {
      this.$emit('size-change', pageSize)
    },
    /**
     * 处理`用户数据表格`的表格行的双击事件
     * @param {Row} row 当前`用户数据表格`行对象
     */
    'handleRowDblclick' (row) {
      this.$emit('edit', row.id)
    },
    /**
     * 处理`用户数据表格`的表格行勾选事件
     * @param {Row[]} selectedRowArray 被勾选的`角色分配器`的表格行
     */
    'handleSelectionChange' (selectedRowArray) {
      this.$emit('selection-change', selectedRowArray)
    },
  },
}
</script>

<style scoped lang="scss">
</style>
